<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bs-slide.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    </link>
</head>

<body>
    <!-- Step1: 基于两个collapse嵌入到accordion-item体系中 -->
    <!-- Step2：把accordion-header和body融入进collapse中 -->
    <!-- Step3: 修正button等样式 -->
    <!-- Step4：启用手风琴模式-->
    <div class="accordion" style="width: 260px;" id="acc">
        <!-- 一个完整的collapse是菜单栏/手风琴的一项item -->
        <div class="accordion-item">
            <div class="accordion-header">
                <!-- toggle 切换器 -->
                <button class="accordion-button ty-submenu" data-bs-toggle="collapse" data-bs-target="#ssss">
                    <i class="bi-search"></i>
                    <span>商品资料</span>
                </button>
            </div>
            <!-- 内容 隐藏或出现 -->
            <div class="collapse accordion-collapse " data-bs-parent="#acc" id="ssss">
                <div class="accordion-body">
                    <ul class="ty-list list-group list-group-flush">
                        <li class="list-group-item 
                        list-group-item-action 
                        list-group-item-primary">
                        <span class="ty-menu-item-title">商品信息</span></li>
                        <li class="list-group-item 
                        list-group-item-action 
                        list-group-item-primary">
                        <span class="ty-menu-item-title">库存一览</span></li>
                        <li class="list-group-item 
                        list-group-item-action 
                        list-group-item-primary">
                        <span class="ty-menu-item-title">商品类别</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">

                <!-- toggle 切换器 -->
                <button class="accordion-button ty-submenu" data-bs-toggle="collapse" data-bs-target="#tttt">
                    <i class="bi-app"></i>
                    <span>采购销售</span>
                </button>
            </div>
            <!-- 内容 隐藏或出现 -->
            <div class="collapse accordion-collapse " data-bs-parent="#acc" id="tttt">
                <div class="accordion-body">
                    <ul class="ty-list list-group list-group-flush">
                        <li class="list-group-item list-group-item-action
                        list-group-item-primary">
                        <span class="ty-menu-item-title">采购单</span></li>
                        <li class="list-group-item list-group-item-action
                        list-group-item-primary">
                        <span class="ty-menu-item-title">销售单</span></li>
                        <li class="list-group-item list-group-item-action
                        list-group-item-primary">
                        <span class="ty-menu-item-title">季度盘点</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>